<template>
  <div class="containerBg">
    <div class="mainHeader">
      <dv-decoration-8 :color="['#0057FF', '#0057FF']" class="line" />
      <dv-decoration-5 :color="['#0057FF', '#0057FF']" class="centerLine" />
      <dv-decoration-8 :color="['#0057FF', '#0057FF']" :reverse="true" class="line" />
      <div class="centerTitle">金华市社保待遇资格“智慧认证”</div>
    </div>
    <div class="mainCenter">
      <dv-border-box-1>
        <div class="mainContent">
          <div class="mainTop">
            <div class="contentL">
              <div class="item1">
                <dv-border-box-12 :color="['#0057FF']">
                  <big-left1 :data="atteData" :dataw="configWater"></big-left1>
                </dv-border-box-12>
              </div>
              <div class="item2">
                <dv-border-box-12 :color="['#0057FF']">
                  <big-left2 :data="rzqdData" @on-click="rzqdClick"></big-left2>
                </dv-border-box-12>
              </div>
            </div>
            <div class="contentC">
              <dv-border-box-13 :color="['#0057FF']">
                <div style="position: relative; height: 100%;">
                  <big-center1 :data="mapData" @on-click="mapClick"></big-center1>
                  <!-- 城乡养老 居民养老 养老供养 -->
                  <div class="mapCategory">
                    <div class="items" v-for="item in categoryList" :key="item.id">
                      <dv-border-box-10 :color="categoryId === item.id ? categoryColor : []">
                        <div class="label" @click="categoryClick(item)">{{ item.label }}</div>
                      </dv-border-box-10>
                    </div>
                  </div>
                  <div class="mapAll">
                    <dv-border-box-10>
                      <div class="label" @click="mapAllClick">全市总览</div>
                    </dv-border-box-10>
                  </div>
                </div>
              </dv-border-box-13>
            </div>
            <div class="contentR">
              <div class="item1">
                <dv-border-box-13 :color="['#0057FF']">
                  <big-right1 :data="rzqkData"></big-right1>
                </dv-border-box-13>
              </div>
              <div class="item2">
                <dv-border-box-13 :color="['#0057FF']">
                  <big-right2 :data="ageData"></big-right2>
                </dv-border-box-13>
              </div>
            </div>
          </div>
          <div class="mainFoot">
            <div class="left">
              <dv-border-box-12 :color="['#0057FF']">
                <div style="position: relative; height: 100%">
                  <big-left3 :data="configCapsule" @on-click="jkpgClick"></big-left3>
                  <div class="healthyBut">
                    <div class="but" @click="healthyButClick(1)">住院慰问</div>
                    <div class="but color2" @click="healthyButClick(2)">日常帮困</div>
                  </div>
                </div>
              </dv-border-box-12>
            </div>
            <div class="right">
              <dv-border-box-8 :dur="5" :color="['#0057FF']">
                <div class="footBox">
                  <div class="bg">
                    <div class="item1">
                      <big-center2 :data="wrzData"></big-center2>
                    </div>
                    <div class="item2">
                      <big-right3 :data="rzRateData"></big-right3>
                    </div>
                  </div>
                </div>
              </dv-border-box-8>
            </div>
          </div>
        </div>
      </dv-border-box-1>
    </div>
    <!--地图弹层-->
    <div class="modalBox" v-if="mapVisible">
      <div class="modalMask" @click="closeModal"></div>
      <div class="modalContent">
        <a class="goBack" @click="goBack(showLevel)">返回</a>
        <div class="bgColor">
          <dv-border-box-11 class="borderBox11" style="width: 100%; height: 100%" :title="modalTitle" >
            <div class="wrap">
              <template v-if="showLevel===1">
                <div class="table">
                  <div class="tr th">
                    <span></span>
                    <span>{{ mapType=='all'?'区县名':'乡镇名' }}</span>
                    <span>通过率</span>
                    <span>应认证数</span>
                    <span>已认证数</span>
                    <span>未认证数</span>
                  </div>
                  <div class="tbody">
                    <dv-loading v-if="loading">Loading...</dv-loading>
                    <template v-if="!loading">
                      <div class="tr" v-for="(item, i) in townData" :key="i">
                        <span>{{ i+1 }}</span>
                        <span v-if="mapType==='all'">{{ item.name }}</span>
                        <span v-else><a @click="townClick(item)">{{ item.name }}</a></span>
                        <span>{{ item.value }}</span>
                        <span>{{ item.total }}</span>
                        <span>{{ item.certified }}</span>
                        <span>{{ item.notCertified }}</span>
                      </div>
                    </template>
                  </div>
                </div>
              </template>
              <template v-if="showLevel===2">
                <div class="table">
                  <div class="tr th">
                    <span></span>
                    <span>村/社区</span>
                    <span>通过率</span>
                    <span>应认证数</span>
                    <span>已认证数</span>
                    <span>未认证数</span>
                  </div>
                  <div class="tbody">
                    <dv-loading v-if="loading">Loading...</dv-loading>
                    <template v-if="!loading">
                      <div class="tr" v-for="(item, i) in villageData" :key="item.aaa027">
                        <span>{{ i+1 }}</span>
                        <span>{{ item.name }}</span>
                        <span>{{ item.value }}</span>
                        <span><a @click="villageClick(item,1)">{{ item.total }}</a></span>
                        <span><a @click="villageClick(item,2)">{{ item.certified }}</a></span>
                        <span><a @click="villageClick(item,3)">{{ item.notCertified }}</a></span>
                      </div>
                    </template>
                  </div>
                </div>
              </template>
              <template v-if="showLevel===3">
                <div class="table personTable">
                  <div class="tr th">
                    <span></span>
                    <span>姓名</span>
                    <span>身份证</span>
                    <span>性别</span>
                    <span>年龄</span>
                    <span>电话</span>
                    <span>地址</span>
                  </div>
                  <div class="tbody">
                    <dv-loading v-if="loading">Loading...</dv-loading>
                    <template v-if="!loading">
                      <div class="tr" v-for="(item, i) in personData" :key="item.idCard">
                        <span>{{i+1}}</span>
                        <span>{{item.name}}</span>
                        <span>{{item.idCard}}</span>
                        <span>{{item.sex}}</span>
                        <span>{{item.age}} 岁</span>
                        <span>{{item.phone}}</span>
                        <span>{{item.address}}</span>
                      </div>
                    </template>
                  </div>
                </div>
              </template>
            </div>
          </dv-border-box-11>
        </div>
      </div>
    </div>
    <!--认证渠道弹层-->
    <div class="modalBox" v-if="rzqdVisible">
      <div class="modalMask" @click="closeModal"></div>
      <div class="modalContent">
        <a class="goBack" @click="goBack(showLevel)">返回</a>
        <div class="bgColor">
          <dv-border-box-11 class="borderBox11" style="width: 100%; height: 100%" :title="modalTitle" >
            <div class="wrap">
              <template v-if="showLevel===1">
                <div class="table rzqdDetail">
                  <div class="tr th">
                    <span></span>
                    <span>县市(区)</span>
                    <span>医保</span>
                    <span>公安</span>
                    <span>社保</span>
                    <span>民政</span>
                    <span>公交</span>
                  </div>
                  <div class="tbody">
                    <dv-loading v-if="loading">Loading...</dv-loading>
                    <template v-if="!loading">
                      <div class="tr" v-for="(item,i) in rzqdDatab" :key="i">
                        <span>{{i+1}}</span>
                        <span>{{item.name}}</span>
                        <span>{{item.yb}}</span>
                        <span>{{item.ga}}</span>
                        <span>{{item.sb}}</span>
                        <span>{{item.mz}}</span>
                        <span>{{item.gj}}</span>
                      </div>
                    </template>
                  </div>
                </div>
              </template>
            </div>
          </dv-border-box-11>
        </div>
      </div>
    </div>
    <!--健康评估弹层-->
    <div class="modalBox" v-if="jkpgVisible">
      <div class="modalMask" @click="closeModal"></div>
      <div class="modalContent">
        <a class="goBack" @click="goBack(showLevel)">返回</a>
        <div class="bgColor">
          <dv-border-box-11 class="borderBox11" style="width: 100%; height: 100%" :title="modalTitle" >
            <div class="wrap">
              <template v-if="showLevel===1">
                <div class="table jkpgDetail">
                  <div class="tr th">
                    <span></span>
                    <span>规则详情</span>
                    <span>判定结果</span>
                    <span>规则制定时间</span>
                  </div>
                  <div class="tbody">
                    <dv-loading v-if="loading">Loading...</dv-loading>
                    <template v-if="!loading">
                      <div class="tr" v-for="(item,i) in jkpgData" :key="i">
                        <span>{{i+1}}</span>
                        <span>{{item.ruleDes}}</span>
                        <span>{{item.ruleClass}}</span>
                        <span>{{item.rulestate}}</span>
                      </div>
                    </template>
                  </div>
                </div>
              </template>
            </div>
          </dv-border-box-11>
        </div>
      </div>
    </div>
    <!--慰问帮困弹层-->
    <div class="modalBox" v-if="wwbkVisible">
      <div class="modalMask" @click="closeModal"></div>
      <div class="modalContent">
        <a class="goBack" @click="goBack(showLevel)">返回</a>
        <div class="bgColor">
          <dv-border-box-11 class="borderBox11" style="width: 100%; height: 100%" :title="modalTitle" >
            <div class="wrap">
              <template v-if="showLevel===1">
                <div class="table healthy">
                  <div class="tr th">
                    <span></span>
                    <span>年度</span>
                    <span>姓名</span>
                    <span>身份证</span>
                    <span>县市(区)</span>
                    <span>乡镇街道</span>
                    <span>村社区</span>
                    <span>{{healthyType==1?'慰问时间':'帮困时间'}}</span>
                    <span>详情</span>
                  </div>
                  <div class="tbody">
                    <dv-loading v-if="loading">Loading...</dv-loading>
                    <template v-if="!loading">
                      <div class="tr" v-for="(item, i) in healthyData" :key="item.aac147">
                        <span>{{i+1}}</span>
                        <span>{{item.aae001}}</span>
                        <span><a @click="personClick(item)">{{item.aac003}}</a></span>
                        <span>{{item.aac147}}</span>
                        <span>{{item.aaa027}}</span>
                        <span>{{item.aaf031}}</span>
                        <span>{{item.aab069}}</span>
                        <span>{{item.aae036}}</span>
                        <span>{{item.mes}}</span>
                      </div>
                      <div class="noList" v-if="!healthyData.length">
                        暂无记录
                      </div>
                    </template>
                  </div>
                </div>
              </template>
              <template v-if="showLevel===2">
                <div class="table healthyDetail">
                  <div class="tr th">
                    <span></span>
                    <span>疾病名称</span>
                    <span>就诊时间</span>
                    <span>总金额</span>
                    <span>自费金额</span>
                  </div>
                  <div class="tbody">
                    <dv-loading v-if="loading">Loading...</dv-loading>
                    <template v-if="!loading">
                      <div class="tr" v-for="(item, i) in healthyDetailData" :key="item.timeJz">
                        <span>{{i+1}}</span>
                        <span>{{item.ake061}}</span>
                        <span>{{item.timeJzStr}}</span>
                        <span>{{item.zje}}</span>
                        <span>{{item.zfje}}</span>
                      </div>
                      <div class="noList" v-if="!healthyDetailData.length">
                        暂无记录
                      </div>
                    </template>
                  </div>
                </div>
              </template>
            </div>
          </dv-border-box-11>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import bigLeft1 from './components/bigLeft1.vue'
  import bigLeft2 from './components/bigLeft2.vue'
  import bigLeft3 from './components/bigLeft3.vue'
  import bigCenter1 from './components/bigCenter1.vue'
  import bigCenter2 from './components/bigCenter2.vue'
  import bigRight1 from './components/bigRight1.vue'
  import bigRight2 from './components/bigRight2.vue'
  import bigRight3 from './components/bigRight3.vue'
  export default {
    name: 'Index',
    components: {
      bigLeft1,
      bigLeft2,
      bigLeft3,
      bigCenter1,
      bigCenter2,
      bigRight1,
      bigRight2,
      bigRight3
    },
    data () {
      return {
        showLevel: 1, // 显示层级
        modalTitle: '', // 弹层标题
        loading: true,
        atteData: [], // 认证概况数据
        configWater: {}, // 认证概况比率
        rzqdData: [], // 认证渠道数据
        rzqdDatab: [], // 认证渠道详情数据
        configCapsule: {}, // 人员健康评估
        rzqkData: {
          x: [],
          y: []
        }, // 近半年情况
        ageData: [], // 年龄段分布
        wrzData: [], // 未认证人员信息
        rzRateData: [], // 认证率
        mapData: [], // 地图数据
        mapVisible: false,
        mapType: '', // all 总览标题显示不同
        oneLevelName: '', // 弹层1级标题
        twoLevelName: '', // 弹层2级标题
        threeLevelName: '', // 弹层3级标题
        townData: [], // 乡镇数据
        villageData: [], // 村数据
        personData: [], // 人员数据
        // 类型
        categoryId: 0,
        categoryLabel: '全部类型',
        categoryList: [
          { label: '全部类型', id: 0 },
          { label: '职工养老', id: 1 },
          { label: '居民养老', id: 2 },
          { label: '供养精简', id: 3 }
        ],
        categoryColor: ['#3e7ff3', '#ffdb5c'],
        rzqdVisible: false,
        jkpgVisible: false,
        jkpgData: [],
        wwbkVisible: false,
        healthyType: 1,
        healthyData: [],
        healthyDetailData: []
      }
    },
    mounted () {
      this.getBig1() // left1
      this.getBig2() // left1
      this.getBig3() // left2
      this.getBig9() // left3
      this.getBig4() // right1
      this.getBig5() // right1
      this.getBig6() // right2
      this.getBig8() // right3
      this.getBig10(this.categoryLabel) // center1
      this.getBig7() // center2
    },
    methods: {
      getBig1 () {
        const params = {}
        this.$http.post(this.$apis.bigScreenZhrz.getBig1, params).then(res => {
          this.atteData = res.result
        })
      },
      getBig2 () {
        const params = {}
        this.$http.post(this.$apis.bigScreenZhrz.getBig2, params).then(res => {
          this.configWater = {
            data: res.result,
            shape: 'roundRect',
            waveNum: 10,
            waveHeight: 20,
            formatter: '通过率: {value}%',
            colors: ['#FA8C16', '#fdcd83']
          }
        })
      },
      getBig3 () {
        const params = {}
        this.$http.post(this.$apis.bigScreenZhrz.getBig3, params).then(res => {
          this.rzqdData = res.result
        })
      },
      getBig9 () {
        const params = {}
        this.$http.post(this.$apis.bigScreenZhrz.getBig9, params).then(res => {
          this.configCapsule = {
            data: res.result,
            unit: '单位: 万人',
            showValue: true,
            colors: ['#62cb73', '#FA8C16', '#f75f37', '#666666']
          }
        })
      },
      getBig4 () {
        const params = {}
        this.$http.post(this.$apis.bigScreenZhrz.getBig4, params).then(res => {
          this.rzqkData.x = res.result
        })
      },
      getBig5 () {
        const params = {}
        this.$http.post(this.$apis.bigScreenZhrz.getBig5, params).then(res => {
          this.rzqkData.y = res.result
        })
      },
      getBig6 () {
        const params = {}
        this.$http.post(this.$apis.bigScreenZhrz.getBig6, params).then(res => {
          this.ageData = res.result
        })
      },
      getBig7 () {
        const params = {}
        this.$http.post(this.$apis.bigScreenZhrz.getBig7, params).then(res => {
          this.wrzData = res.result
        })
      },
      getBig8 () {
        const params = {}
        this.$http.post(this.$apis.bigScreenZhrz.getBig8, params).then(res => {
          this.rzRateData = res.result
        })
      },
      getBig10 (type) {
        const params = {
          eae003: type
        }
        this.$http.post(this.$apis.bigScreenZhrz.getBig10, params).then(res => {
          this.mapData = res.result
        })
      },
      // 类型点击
      categoryClick (item) {
        this.categoryId = item.id
        this.categoryLabel = item.label
        this.getBig10(item.label) // 获取地图数据
      },
      // 全市总览
      mapAllClick () {
        this.mapType = 'all'
        this.loading = true
        this.oneLevelName = '金华市全市总览'
        this.modalTitle = '金华市全市总览'
        this.mapVisible = true
        this.townData = []
        const params = {
          eae003: this.categoryLabel // 类型
        }
        this.$http.post(this.$apis.bigScreenZhrz.getBig10, params).then(res => {
          this.townData = res.result
          this.loading = false
        })
      },
      // 地图点击
      mapClick (data) {
        this.oneLevelName = data.name
        this.modalTitle = data.name
        this.mapVisible = true
        this.loading = true
        this.townData = []
        const params = {
          aaa027: data.aaa027,
          eae003: this.categoryLabel // 类型
        }
        this.$http.post(this.$apis.bigScreenZhrz.getBig11, params).then(res => {
           this.townData = res.result
           this.loading = false
        })
      },
      // 点击乡镇
      townClick (data) {
        this.showLevel = 2
        this.villageData = []
        this.twoLevelName = data.name
        this.modalTitle = data.name
        this.loading = true
        const params = {
          aaa027: data.aaa027, // 县区code
          aaf031: data.name, // 乡镇的名
          eae003: this.categoryLabel // 类型
        }
        this.$http.post(this.$apis.bigScreenZhrz.getBig12, params).then(res => {
          this.villageData = res.result
          this.loading = false
        })
      },
      // 点击村
      villageClick (data, type) {
        // type 1总数 2已认证 3未认证
        this.showLevel = 3
        this.personData = []
        this.threeLevelName = data.name
        let tit = ''
        this.loading = true
        let params = {
          aaa027: data.aaa027, // 县区code
          aaf031: data.aaf031, // 乡镇的名
          aab069: data.name, // 村的名
          eae003: this.categoryLabel // 类型
        }
        if (type === 1) {
          tit = '应认证'
        }
        if (type === 2) {
          tit = '已认证'
          params = { ...params, ifrz: true } // 是否认证
        }
        if (type === 3) {
          tit = '未认证'
          params = { ...params, ifrz: false }
        }
        this.modalTitle = `${data.name}-${tit}`
        this.$http.post(this.$apis.bigScreenZhrz.getBig13, params).then(res => {
          this.personData = res.result
          this.loading = false
        })
      },
      // 认证渠道点击
      rzqdClick () {
        this.rzqdVisible = true
        this.modalTitle = '各县市认证渠道'
        this.loading = true
        const params = { }
        this.$http.post(this.$apis.bigScreenZhrz.getBig3b, params).then(res => {
          this.rzqdDatab = res.result
          this.loading = false
        })
      },
      // 健康评估点击
      jkpgClick () {
        this.jkpgVisible = true
        this.modalTitle = '健康评估规则'
        this.loading = true
        const params = { }
        this.$http.post(this.$apis.bigScreenZhrz.getBig16, params).then(res => {
          this.jkpgData = res.result
          this.loading = false
        })
      },
      // 慰问 帮困
      healthyButClick (type) {
        this.healthyType = type
        this.oneLevelName = type === 1 ? '住院慰问' : '日常帮困'
        this.modalTitle = type === 1 ? '住院慰问' : '日常帮困'
        this.wwbkVisible = true
        this.healthyData = []
        this.loading = true
        this.$http.post(this.$apis.bigScreenZhrz.getBig14, { type }).then(res => {
          this.healthyData = res.result
          this.loading = false
        })
      },
      // 人员点击
      personClick (data) {
        const { modalTitle } = this
        const { aac003, aac147 } = data
        this.showLevel = 2
        this.modalTitle = `${modalTitle} - ${aac003}`
        this.healthyDetailData = []
        this.loading = true
        this.$http.post(this.$apis.bigScreenZhrz.getBig15, { aac147 }).then(res => {
          this.healthyDetailData = res.result
          this.loading = false
        })
      },
      // 关闭弹层
      closeModal () {
        this.showLevel = 1 // 显示层级
        this.modalTitle = '' // 弹层标题
        this.mapVisible = false // 地图弹层
        this.mapType = ''
        this.rzqdVisible = false // 认证渠道弹层
        this.jkpgVisible = false // 健康评估弹层
        this.wwbkVisible = false // 慰问帮困弹层
      },
      // 返回
      goBack (showLevel) {
        if (showLevel === 1) {
          this.closeModal()
        }
        if (showLevel === 2) {
          this.showLevel = 1
          this.modalTitle = this.oneLevelName
        }
        if (showLevel === 3) {
          this.showLevel = 2
          this.modalTitle = this.twoLevelName
        }
      }

    }
  }
</script>

<style scoped lang="less">
  .containerBg {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*width: 1920px;*/
    height: 1080px;
    background-image: url("~@/assets/bg/pageBg.jpg");
    background-size: 100% 100%;
    flex-direction: column;
  }
  .mainHeader {
    position: relative;
    width: 100%;
    height: 85px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
    .line { width: 400px; height: 60px;}
    .centerLine {
      width:940px;height:60px;margin-top: 60px
    }
    .centerTitle {
      position: absolute;
      font-size: 36px;
      font-weight: 700;
      color: #fff;
      left: 50%;
      top: 15px;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
    }
  }
  .mainCenter {
    width: 100%; height: 995px;
    .mainContent {
      padding: 25px; height: 100%;
    }
  }
  .mainTop {
    width: 100%; height: 630px; display: flex;
    /*1920 - 50*/
    .contentL { width: 22%; height: 100%; /*412px*/
      .item1 { width: 100%; height: 284px;}
      .item2 { width: 100%; height: 346px;}
    }
    .contentC { width: 50%; height: 100%;
      .mapCategory {
        position: absolute; right: 30px; top: 30px; color: #fff;
        .items {padding: 5px 0;}
        .label {padding: 17px 40px; cursor: pointer}
      }
      .mapAll {
        position: absolute; right: 30px; bottom: 30px; color: #fff;
        .label {padding: 17px 40px; cursor: pointer}
      }
    } /*934px*/
    .contentR { width: 28%; height: 100%;
      .item1 { width: 100%; height: 284px;}
      .item2 { width: 100%; height: 346px;}
    } /*524px*/
  }
  .mainFoot {
    width: 100%; height: 310px; display: flex;
    .left { width: 22%; height: 100%;
      .healthyBut { position: absolute; display: flex; left: 25px; bottom: 25px; z-index: 222;
        .but{
          color: #fff; font-size: 15px; padding: 8px 12px; background: #3dc365;
          border-radius: 5px; margin-left: 10px; cursor: pointer;
        }
        .color2 { background: #3aa1ff}
      }
    }
    .right {
      width: 78%;
      height: 100%;
      .footBox {padding: 10px;width: 100%;
        height: 100%;box-sizing: border-box;}
      .bg {
        border-radius: 12px;
        background: rgba(35, 62, 249, 0.2);
        height: 100%;
        padding: 10px; box-sizing: border-box; display: flex;
        .item1 {
          width: 64%; height: 100%;
        }
        .item2 {
          width: 36%; padding-left: 1%; height: 100%;
        }
      }
    }
  }

  //flex
  .d-flex {
    display: flex;
  }
  // 弹层
  .modalBox { position: fixed;top: 0;
    right: 0;
    bottom: 0;
    left: 0; z-index: 999999999}
  .modalMask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000000;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
  }
  .modalContent {
    position: fixed; left: 180px; right: 180px; top: 130px; bottom: 130px; z-index: 99999999;
    .goBack {position: absolute; top: 0; right: 28px;z-index: 999; font-size: 24px;
      line-height: 48px; color: #fff}
    .bgColor {
      border-radius: 10px; background: #0b1a4b; height: 100%; padding: 0;
    }
    .wrap {
      padding: 100px 30px 30px; height: 100%;
    }
  }
  .table {width: 100%; color: #fff; height: 100%; overflow: hidden;
    .tr {
      font-weight: bold; display: grid;
      grid-template-columns:0.4fr 1.2fr 0.8fr 1fr 1fr 1fr;
      border-bottom: 1px solid #01239e;
      span {padding: 10px; font-size: 22px }
    }
    .tr.th {padding-right: 8px;}
    .tbody {height: calc( 100% - 40px ); overflow-y: scroll;
      .tr {
        font-weight: normal;
        a{color: #ff9630}
      }
    }
    .noList {text-align: center; width: 100%; height: 100%; line-height: 18}
  }
  .table.personTable {
    .tr {
      grid-template-columns:0.4fr 0.68fr 1.25fr 0.5fr 0.5fr 1.1fr 2fr;
    }
  }
  .table.rzqdDetail{
    .tr{grid-template-columns:0.4fr 1.2fr 1fr 1fr 1fr 1fr 1fr;}
  }
  .table.jkpgDetail{
    .tr{grid-template-columns: 0.3fr 2.2fr 0.7fr 0.8fr;}
  }
  .table.healthy{
    .tr {
      grid-template-columns:0.4fr 0.45fr 0.58fr 1.3fr 0.68fr 0.7fr 0.7fr 0.7fr 2.3fr;
    }
  }
  .table.healthyDetail{
    .tr {
      grid-template-columns:0.4fr 1.4fr 0.8fr 1fr 1fr;
    }
  }
</style>
